<!-- 
定义:
    - 浅拷贝: 只复制第一层,如果值是对象,就复制指针;(所以如果值中含有对象,则两者享有相同的地址);
    - 深拷贝: 将数据中所有的数据拷贝下来,对拷贝之后的数据进行修改并不会影响到原数据;

实现方法:
    - 浅拷贝的实现方式: 
        1. Object.assign(target,..source) (将所有可枚举的属性值从一个或者多个源对象分配到目标对象);
        2. 展开运算符 ...
        3. concat
        4. 解构赋值
    - 深拷贝的实现方式:
        1. JSON.parse(JSON.stringify(obj))

 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     
 </body>
 <script>
    // 原数据,包含字符串,对象,函数,数组等不同的数据类型
    let PrimaryObj = {
        name: 'Simone',
        age: 22,
        sex: 'Male',
        wife: undefined,
        info: {
            hobby: 'smoke',
            addr: 'Finland'
        },
        say: function (){
            console.log('你好呀!')
        },
        hate: ['homework','losers']
    }

    //  1.实现浅拷贝的几种方式： 
    //      1.1 Object.assign()
    let ShallowObj1 = Object.assign({},PrimaryObj);
    console.log('1.1 Object.assign()浅拷贝:',ShallowObj1);
    //      1.2 展开运算符 
    let ShallowObj2 = {...PrimaryObj};
    console.log('1.2 展开运算符浅拷贝:',ShallowObj2);

    
    // 2.实现深拷贝的几种方式:
    //      2.1: JSON.parse(JSON.stringify(object)) [注: 该方法会忽略symbol和undefined,不能序列化函数,不能解决循环引用的对象]
    let DeepObj1 = JSON.parse(JSON.stringify(PrimaryObj));
    console.log('2.1 深拷贝JSON转换: ',DeepObj1); 
    //      2.2 MessageChannel(消息通道,通过构造函数可以创建一个消息通道,实例化的对象会继承两个属性: port1和port2) (这个我也不会)


    // 3.手写浅拷贝:
    // hasOwnProperty: 确定某个对象是否具有带指定名称的属性,返回布尔值;
    console.log(PrimaryObj.hasOwnProperty('name')) 
    function ShallowClone(){

    }

    // 4.手写深拷贝:利用递归实现深拷贝
    function deepClone(obj){
        // Step1: 声明一个变量保存拷贝后的内容
        let newobj = null;

        // Step2: 判断数据类型是否为复杂数据类型
        if(typeof(obj) === 'object' && obj !== null){
            
        }
        
    }

    // 深浅拷贝的对比:
    PrimaryObj.info.hobby = 'Coding';
    console.log(ShallowObj1,ShallowObj2,DeepObj1) // 可以观察到浅拷贝的属性的属性值受原属性影响,而深拷贝没有.
 </script>
 </html>